<template>
	<view class="detail">
		<view class="fixbg" :style="{ 'background-image' : 'url('+ songDetail.al.picUrl +')' }"></view>
		<musichead :title="songDetail.name" :icon="true" color="white"></musichead>
		
		<view class="container" style="{overflow: hidden;}">
			<scroll-view scroll-y="true">
				<view class="detail-play" @tap="handleToPlay">
					<image :src="songDetail.al.picUrl" :class="{'detail-play-run': isPlayRotate}"></image>
					<text class="iconfont" :class="iconPlay"></text>
					<view></view>
			
				</view>
				<!-- 歌词 -->
				<view class="detail-lyric">
					<view class="detail-lyric-wrap">
						<view class="detail-lyric-item" :class="{active : lyricIndex == index}"
							v-for="(item,index) in songLyric" :key="index">
							{{item.lyric}}
						</view>
					</view>
			
				</view>
				<view class="detail-like">
					<view class="detail-like-head">喜欢这首歌的人也听</view>
					<view class="detail-like-item" v-for="(item,index) in songSimi" :key="index">
						<view class="detail-like-img">
							<image :src="item.album.picUrl"></image>
						</view>
						<view class="detail-like-song">
							<view>{{ item.name }}</view>
							<view>
								<image v-if="item.privilege.flag > 60 && item.privilege.flag < 70" src="../../static/dujia.png" mode=""></image>
								<image v-if="item.privilege.maxbr == 999000" src="../../static/sq.png" mode=""></image>
								{{ item.album.artists[0].name }} - {{ item.name }}
							</view>
			
						</view>
						<text class="iconfont iconbofang"></text>
			
					</view>
			
				</view>
				<!-- 评论 -->
				<view class="detail-comment"></view>
				
			</scroll-view>
		</view>
	
	</view>
</template>

<script>
	import musichead from '../../components/musichead/musichead.vue'
	import '@/common/iconfont.css'
	import {
		songDetail,
		songSimi,
		songComment,
		songLyric,
		songUrl
	} from '../../common/api.js'
	export default {
		data() {
			return {
				songDetail: {
					al: {
						picUrl: ''
					}
				},
				songSimi: [],
				songComment: [],
				songLyric: [],
				isPlayRotate: false,
				iconPlay: 'iconpause',
				lyricIndex: 0
			}
		},
		onLoad(options) {
			this.getMusic(options.songId)
		},

		methods: {
			getMusic(songId) {
				// uni.showLoading({
				// 	title: '加载中...'
				// });
				this.isLoading = true;
				Promise.all([songDetail(songId), songSimi(songId),
					songComment(songId), songLyric(songId), songUrl(songId)
				]).then((res) => {
					if (res[0].data.code == '200') {
						this.songDetail = res[0].data.songs[0];
					}
					if (res[1].data.code == '200') {
						this.songSimi = res[1].data.songs;
					}
					if (res[2].data.code == '200') {
						this.songComment = res[2].data.hotComments;
					}
					if (res[3].data.code == '200') {
						let lyric = res[3].data.lrc.lyric;

						var result = [];
						let re = /\[([^\]]+)\]([^\[]+)/g;
						lyric.replace(re, ($0, $1, $2) => {
							result.push({
								"time": this.formatTimeToSec($1),
								"lyric": $2
							})
						})
						this.songLyric = result;
					}
				})
			},
			formatTimeToSec(value) {
				let arr = value.split(':');
				return (Number(arr[0] * 60)) + Number(arr[1]).toFixed(1)
			}
		}
	}
</script>

<style scoped>
	.detail-play {
		width: 580rpx;
		height: 580rpx;
		margin: 214rpx auto 0 auto;
		position: relative;
		background: url(~@/static/disc.png);
		background-size: cover;
	}

	.detail-play image {
		width: 370rpx;
		height: 370rpx;
		border-radius: 50%;
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		right: 0;
		margin: auto;
		animation: 10s linear move infinite;
		animation-play-state: paused
	}

	@keyframes move {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}

	.detail-play .detail-play-run {
		animation-play-state: running;
	}

	.detail-play text {
		width: 100rpx;
		height: 100rpx;
		font-size: 100rpx;
		color: white;
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		margin: auto;
	}

	.detail-play view {
		width: 230rpx;
		height: 360rpx;
		background: url(~@/static/needle.png);
		position: absolute;
		left: 100rpx;
		right: 0;
		top: -200rpx;
		margin: auto;
		background-size: cover;
	}

	.detail-lyric {
		line-height: 82rpx;
		height: 246rpx;
		overflow: hidden;
		font-size: 32rpx;
		color: #6f6e73;
		text-align: center;
	}

	.detail-lyric-item {
		height: 82rpx;
	}

	.detail-lyric-item.active {
		color: white;
	}

	.detail-like {
		margin: 0 30rpx;
	}

	.detail-like-head {
		font-size: 36rpx;
		color: white;
		margin: 50rpx 0;
	}

	.detail-like-item {
		display: flex;
		align-items: center;
		margin-bottom: 28rpx;
	}
	.detail-like-img{
		width:82rpx; height:82rpx; border-radius: 20rpx; 
		margin-right:20rpx; overflow: hidden;
	}
	.detail-like-img image{ width:100%; height:100%;}
	.detail-like-song{flex: 1; color: #c6c2bf;}
	.detail-like-song view:nth-child(1){font-size:28rpx; color:white; margin-bottom: 12rpx;}
	.detail-like-song view:nth-child(2){font-size:22rpx;}
	.detail-like-song image{ width:26rpx; height:20rpx; margin-right:10rpx;}
	.detail-like-item text{ font-size:50rpx; color:#c6c2bf;}
</style>